<template>
  <el-container style="height: 100vh;">
    <!--头部区域-->
    <el-header>
      <el-icon @click="backHome" style="color: rgba(0,12,23,0.79);outline:none!important;margin-left: 5px" size="20px" class="home-ishover">
        <HomeFilled />
      </el-icon>
      <el-text style="margin-left: 560px;font-size: 18px;color: rgba(0,12,23,0.79);font-weight: bold">欢迎使用MA医疗预约系统</el-text>
      <div style="flex:1;width:0;display: flex;align-items: center;justify-content: flex-end;margin-right: 10px">
        <el-dropdown placement="bottom" @command="handleCommand">
          <!--              <img :src="@/assets/personal.png" style="width: 25px;height: 25px;">-->
          <div style="display: flex;align-items: center;cursor:default;">
            <span style="font-weight: bold">{{ AccountName }}</span>
            <el-icon style="color: rgba(0,12,23,0.79);outline:none!important;margin-left: 5px" size="20px" class="user-ishover">
              <UserFilled />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu >
              <el-dropdown-item command="personal">个人中心</el-dropdown-item>
              <el-dropdown-item command="repass">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <!--主体区域-->
    <el-main style="padding-top: 70px;">
      <!--路由出口-->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { useRouter } from "vue-router"
import { UserFilled,HomeFilled } from "@element-plus/icons-vue";
import { ref } from "vue";
import loginApi from "@/apis/login";
import {ElNotification} from "element-plus";
// const route = useRoute();
const router = useRouter();


const AccountName = ref('');

const handleCommand = (command) => {
  switch (command){
    case 'personal':
    case 'repass':
      router.push('/patient/personal');
      break;
    case 'logout':
      // 执行退出登录操作
      patientLogout();
      router.push('/login');
      break;
    default:
      break;
  }
}


let res;
const patientLogout = async () =>{
  const authorization = sessionStorage.getItem('authorization')
  const data = {
    authorization: authorization
  }
  res = await loginApi.patientLogout(data);
  console.log(res)
  if(res.code === 200){
    // 返回成功响应
    ElNotification({
      title: '成功提示',
      message: '退出登录成功',
      type: 'success',
    });
    // sessionStorage.removeItem('authorization') //回收authorization
    sessionStorage.clear()
  }else {
    ElNotification({
      title: '失败提示',
      message: '退出登录失败',
      type: 'error',
    })
  }
}

const backHome = () =>{
  router.push({name:'Home'})
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>



.el-header{
  box-shadow: 2px 0 6px rgba(0,21,41,0.35);
  background-color: rgba(110, 169, 243, 0.31);
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
}



.home-ishover:hover{
  transition: color 0.3s; /* 平滑的颜色过渡效果 */
  color: #b1b1b1; /* hover 时的颜色 */
  cursor: pointer;
}

.user-ishover:hover {
  transition: color 0.3s; /* 平滑的颜色过渡效果 */
  color: #b1b1b1; /* hover 时的颜色 */
}


</style>
